<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				float: left;
				/*图片脱离文档流--文字包含在图片周边*/
			}
			
			p{
				font-size: 16px;
			}
			
			
			
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/png1.jpg" alt="joke" width="200px" height="200px"  />
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quisquam inventore tempore error dolorum libero. Sequi inventore consequuntur tenetur amet, molestias quod, minus assumenda eligendi aliquam, laborum vero neque facilis?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, fuga facere praesentium expedita odit sit pariatur? Ad soluta eveniet at! Id porro reiciendis harum eum libero eligendi iste corporis saepe.  Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique iste minima qui ex, cum exercitationem doloribus quae odit, sunt tempore corporis nulla earum rerum consequatur, aut reiciendis debitis dolorum cumque.</p>
	</body>
</html>